<template>
  <Dropdown transfer-class-name="drop-menu-ml" placement="right-start" :class="{'drop-child-menu':parentPath}">
    <a :class="$route.path==parentItem.path?'drop-menu checked':'drop-menu'" type="text">
      <Icon size="17" color="var(--menu-title)" v-if="!parentPath && parentItem.meta && parentItem.meta.icon" :type="parentItem.meta.icon"/>
      <span>{{ parentPath }}</span>
      <Icon size="17" v-if="parentPath" type="ios-arrow-forward"></Icon>
    </a>
    <DropdownMenu slot="list">
      <div v-for="(item,index) in parentItem.children" :key="`${item.path}-${index}`">
        <collapsed-menu class="dropdown-item-child" @handleSelect="handleSelect" v-if="item.children && item.children.length >= 0" :parent-item="item" :parent-path="item.meta.title"></collapsed-menu>
        <!-- <collapsed-menu class="dropdown-item-child" @handleSelect="handleSelect" v-if="item.children && item.children.length >= 0 && item.children.length == 1" :parent-item="item" :parent-path="item.meta.title"></collapsed-menu> -->
        <DropdownItem v-else @click.native="handleSelect(item.path)" :key="`drop-${item.path}`" :path="item.path">
          <Icon size="17" v-if="item.meta && item.meta.icon" :type="item.meta.icon"/>
          <span>{{ item.meta.title }}</span>
        </DropdownItem>
      </div>
    </DropdownMenu>
  </Dropdown>
</template>
<script>
import CollapsedMenu from "./collapsed-menu";
export default {
  name: "CollapsedMenu",
  props: {
    parentItem: {
      type: Object,
      default() {
        return {};
      }
    },
    parentPath: {
      default() {
        return null;
      }
    }
  },
  components: {
    CollapsedMenu
  },
  data() {
    return {};
  },
  methods: {
    handleSelect(item) {
      this.$emit("handleSelect",item)
    }
  },
  watch: {},
  mounted() {}
};
</script>
<style lang="less" scoped>
.ivu-tooltip,.ivu-tooltip-rel,a.drop-menu {
  display: inline-block;
  width: 100%;
  height: 48px;
  line-height: 48px;
  text-align: center;
  color: #fff;
  &.checked {
    background-color: var(--menu-active-bg);
  }
}
/deep/.drop-menu-ml {
  margin-left: 4px;
  min-width: 150px;
  i.ivu-icon {
    margin-right: 4px;
  }
  span+i.ivu-icon {
    margin: 0 0 0 4px;
  }
}
.dropdown-item-child a.drop-menu {
  line-height: normal;
  height: auto;
  padding: 7px 16px;
  &.checked {
    background-color: transparent;
  }
}
.drop-child-menu a.drop-menu {
  color: #333;
}
</style>
